<style lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .bench_search4 {
    margin-bottom: 10px;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .code-img1 {
    height: 60%;
    width: 90%;
    margin-left: 5%;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
</style>

<template>
  <Card shadow class="card_style" :bordered="false" :dis-hover="true">
    <Tabs :animated="false" @on-click="searchData(tab_index)" v-model="tab_index">
      <TabPane :label="'全部('+tab_info[0][0]+')'">
        <Row class="bench_search4">
          <Col span="5" offset="1">
            <span>申请人：</span>
            <Input style="width: 70%;" v-model="applyname" />
          </Col>
          <Col span="6">
            <span>业务编号：</span>
            <Input style="width: 70%;" v-model="order_code" />
          </Col>
          <Col span="7">
            <span>申请时间：</span>
            <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer=""
            placement="bottom-end" style="width: 200px" v-model="applytime"></DatePicker>
          </Col>
          <Button class="new-btn-sty" @click="searchData(tab_index)"><Icon type="ios-clock-outline" /> 刷新</Button>
          <Button class="new-btn-sty" @click="searchData(tab_index)"><Icon type="ios-search" /> 搜索</Button>
        </Row>
        <Table border :columns="columns1" :data="datalist"></Table>
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>数据正在加载</div>
            </Spin>
          </Col>
        </Row>
        <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style" show-total  show-sizer @on-page-size-change="size"/>
      </TabPane>
      <TabPane :label="'转件待受理('+tab_info[0][1]+')'">
        <Row class="bench_search4">
          <Col span="5" offset="1">
            <span>申请人：</span>
            <Input style="width: 70%;" v-model="applyname" />
          </Col>
          <Col span="6">
            <span>业务编号：</span>
            <Input style="width: 70%;" v-model="order_code" />
          </Col>
          <Col span="7">
            <span>申请时间：</span>
            <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer=""
            placement="bottom-end" style="width: 200px" v-model="applytime"></DatePicker>
          </Col>
          <Button class="new-btn-sty" @click="(tab_index)"><Icon type="ios-search" /> 搜索</Button>
        </Row>
        <Table border :columns="columns1" :data="datalist"></Table>
        <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style" show-total  show-sizer @on-page-size-change="size"/>
      </TabPane>
      <TabPane :label="'转件待办结('+tab_info[0][2]+')'">
        <Row class="bench_search4">
          <Col span="5" offset="1">
            <span>申请人：</span>
            <Input style="width: 70%;" v-model="applyname" />
          </Col>
          <Col span="6">
            <span>业务编号：</span>
            <Input style="width: 70%;" v-model="order_code" />
          </Col>
          <Col span="7">
            <span>申请时间：</span>
            <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer=""
            placement="bottom-end" style="width: 200px" v-model="applytime"></DatePicker>
          </Col>
          <Button class="new-btn-sty" @click="searchData(tab_index)"><Icon type="ios-search" /> 搜索</Button>
        </Row>
        <Table border :columns="columns1" :data="datalist"></Table>
        <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style" show-total  show-sizer @on-page-size-change="size"/>
      </TabPane>
      <TabPane :label="'转件处理中('+tab_info[0][3]+')'">
        <Row class="bench_search4">
          <Col span="5" offset="1">
            <span>申请人：</span>
            <Input style="width: 70%;" v-model="applyname" />
          </Col>
          <Col span="6">
            <span>业务编号：</span>
            <Input style="width: 70%;" v-model="order_code" />
          </Col>
          <Col span="7">
            <span>申请时间：</span>
            <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer=""
            placement="bottom-end" style="width: 200px" v-model="applytime"></DatePicker>
          </Col>
          <Button class="new-btn-sty" @click="searchData(tab_index)"><Icon type="ios-search" /> 搜索</Button>
        </Row>
        <Table border :columns="columns1" :data="datalist"></Table>
        <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style" show-total  show-sizer @on-page-size-change="size"/>
      </TabPane>
      <TabPane :label="'转件办结成功('+tab_info[0][4]+')'">
        <Row class="bench_search4">
          <Col span="5" offset="1">
            <span>申请人：</span>
            <Input style="width: 70%;" v-model="applyname" />
          </Col>
          <Col span="6">
            <span>业务编号：</span>
            <Input style="width: 70%;" v-model="order_code" />
          </Col>
          <Col span="7">
            <span>申请时间：</span>
            <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer=""
            placement="bottom-end" style="width: 200px" v-model="applytime"></DatePicker>
          </Col>
          <Button class="new-btn-sty" @click="searchData(tab_index)"><Icon type="ios-search" /> 搜索</Button>
        </Row>
        <Table border :columns="columns1" :data="datalist"></Table>
        <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style" show-total  show-sizer @on-page-size-change="size"/>
      </TabPane>
      <TabPane :label="'转件办理失败('+tab_info[0][5]+')'">
        <Row class="bench_search4">
          <Col span="5" offset="1">
            <span>申请人：</span>
            <Input style="width: 70%;" v-model="applyname" />
          </Col>
          <Col span="6">
            <span>业务编号：</span>
            <Input style="width: 70%;" v-model="order_code" />
          </Col>
          <Col span="7">
            <span>申请时间：</span>
            <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer=""
            placement="bottom-end" style="width: 200px" v-model="applytime"></DatePicker>
          </Col>
          <Button class="new-btn-sty" @click="searchData(tab_index)"><Icon type="ios-search" /> 搜索</Button>
        </Row>
        <Table border :columns="columns1" :data="datalist"></Table>
        <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style" show-total  show-sizer @on-page-size-change="size"/>
      </TabPane>
    </Tabs>

    <Modal v-model="modelShow.show" :title="modelShow.title" width="900">
      <!-- 订单进度模态框 -->
      <template v-if="modelShow.modal1">
        <Steps :current="modelShow.dataInfo.step_num" direction="vertical" style="margin-left: 100px;width: 70%;">
          <Step v-for="(item, index) in modelShow.dataInfo.process_list" v-bind:key="index"
          :title="item.step_title" :content="item.text"></Step>
        </Steps>
      </template>
      <!-- 要件模态框 -->
      <template v-if="modelShow.modal2">
        <div style="background-color:white;line-height: 2.5;" class="" id="printMe1">
          <div style="height:auto">
            <img :src="modelShow.dataInfo.paramsImg" alt="" class="code-img1" width="100%">
          </div>
        </div>
      </template>
      <!-- 电子证照图片 -->
      <template v-if="modelShow.modal3">
        <div class="" id="printMe1">
          <img :src="modelShow.dataInfo.resultImg.imgs" style="width: 100%"/>
          <!-- <img :src="'data:image/jpg;base64,'+img" v-for="(img, index) in modelShow.dataInfo.resultImg.imgs"
          v-bind:key="index" style="width: 100%"/> -->
        </div>
      </template>
      <!-- 订单处理功能模态框 -->
      <template v-if="modelShow.modal4">
        <Form label-position="right" :label-width="100">
          <Row>
            <Col span="5" class="ivu-form-item-label">{{modelShow.dataInfo.params_name}}：</Col>
            <Col span="16" class="ivu-form-item-content">
              <Input v-if="modelShow.dataInfo.params_type == 'textarea'" v-model="modelShow.dataInfo.text"
              type="textarea" :autosize="{minRows: 3,maxRows: 7}" :disabled="modelShow.dataInfo.update_flag"></Input>
            </Col>
          </Row>
        </Form>
      </template>
      <div slot="footer">
        <Button type="success" @click="acceptBtn" v-if="modelShow.modal4">确定</Button>
        <Button type="success" v-print="'#printMe1'" v-if="modelShow.modal2 || modelShow.modal3">打印</Button>
        <Button type="error" @click="modelShow.show=false">关闭</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import { separateorder, setorderapply, orderProcess, tabcounts, date2str } from '@/api/eventlist'
import expandRow from './components/table-other/index'

export default {
  name: 'separateservice',
  components: {
    expandRow
  },
  data () {
    return {
      loadData: true,
      currentPageNo: 1,
      currentPageSize: 10,
      applyname: '',
      order_code: '',
      applytime: [],
      modelShow: {
        show: false,
        title: '',
        modal1: false,
        modal2: false,
        modal3: false,
        modal4: false,
        dataInfo: {}
      },
      totalnum: 0,
      tab_index: 0,
      // 每个标签页的名称和对应订单数量，标签与状态转换字典
      tab_info: [
        [ 0, 0, 0, 0, 0, 0 ],
        [ null, '8', '82', '81', '2', '3' ],
        { a8: 1, a82: 2, a81: 3, a2: 4, a7: 2, a3: 5 }
      ],
      columns1: [
        { title: '',
          type: 'expand',
          width: 40,
          align: 'center',
          render: (h, params) => {
            return h(expandRow, {
              props: { params: params },
              on: {
                breachRun: (type, data) => {
                  if (type === 1) {
                    this.viewProcess(data)
                  } else if (type === 2) {
                    this.getResultImg(data)
                  } else if (type === 3) {
                    if (data) {
                      this.modelShow.dataInfo.paramsImg = data
                      this.showModel('modal2', '要件预览打印')
                    } else {
                      this.$Notice.error({ title: '无要件信息', desc: '未上传此要件' })
                    }
                  }
                }
              }
            })
          }
        },
        { title: '事项名称', key: 'title', minWidth: 190 },
        { title: '业务编号', key: 'code', width: 150 },
        { title: '申请人', key: 'name', width: 80 },
        { title: '手机号', key: 'mobile', width: 115 },
        { title: '身份证', key: 'cardnoFilter', width: 160 },
        { title: '状态', key: 'process_name', width: 85, align: 'center', className: 'nopadding' },
        { title: '申请时间', key: 'create_time', width: 140, align: 'center', className: 'nopadding' },
        {
          title: '操作',
          key: 'cardno',
          align: 'center',
          className: 'nopadding',
          minWidth: 130,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px', backgroundColor: '#235CA7', borderColor: '#235CA7' },
                on: {
                  click: () => {
                    this.updateInfo(params.row, params.row.state === '8' ? '1' : '2', null, null)
                  }
                }
              }, params.row.state === '8' ? '编辑' : '查看')
            )
            let action1 = JSON.parse(params.row.action || '{}')
            for (let key in action1) {
              if (action1[key].type === 'button' && action1[key].next_process_id !== '-1') {
                temp.push(
                  h('Button', {
                    props: { type: 'success', size: 'small' },
                    style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                    on: {
                      click: () => {
                        let params_type = action1[key].params_type
                        if (params_type && params_type.indexOf('_') !== 0) {
                          this.modelShow.dataInfo = action1[key]
                          this.modelShow.dataInfo.text = action1[key].next_process_id === '-2' ? params.row.reason : ''
                          this.modelShow.dataInfo.update_flag = action1[key].next_process_id === '-2'
                          this.modelShow.dataInfo.code = params.row.code
                          this.modelShow.dataInfo.key = key
                          this.modelShow.dataInfo.state = params.row.state
                          this.showModel('modal4', params.row.title + '-' + action1[key].name)
                        } else {
                          this.handlerItem(params.row, key, action1[key])
                        }
                      }
                    }
                  }, action1[key].name)
                )
              }
            }
            return h('div', temp)
          }
        }
      ],
      datalist: []
    }
  },
  methods: {
    size (pageSize) {
      this.currentPageSize = pageSize
      this.change()
    },
    // 统计每个标签页的事项数
    initTabCount () {
      tabcounts().then(res => {
        if (res.data.data) {
          this.tab_info[0][0] = 0
          this.tab_info[0][1] = 0
          this.tab_info[0][2] = 0
          this.tab_info[0][3] = 0
          this.tab_info[0][4] = 0
          this.tab_info[0][5] = 0
          res.data.data.forEach(element => {
            let index = this.tab_info[2]['a' + element.state]
            if (index || index === 0) {
              this.tab_info[0][0] += element.num
              this.tab_info[0][index] += element.num
            }
          })
          this.$forceUpdate()
        }
      })
    },
    // 查询订单列表接口
    init (param) {
      param.pageNo = this.currentPageNo
      param.pageSize = this.currentPageSize
      param.state = param.state === '82' ? '82,7' : param.state
      separateorder(param).then(res => {
        if (res.data.data) {
          this.datalist = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          for (var i = 0; i < this.datalist.length; i++) {
            this.datalist[i]._expanded = false
            let cardno = this.datalist[i].cardno
            let mobile = this.datalist[i].mobile
            let birthday = this.datalist[i].birthday
            if (cardno !== undefined) {
              const str1 = `${cardno.substring(0, 10)}******${cardno.substring(cardno.length - 2)}`
              this.datalist[i].cardnoFilter = str1
            }
            if (mobile !== undefined) {
              let str2 = ''
              if (mobile.length === 11) {
                str2 = `${mobile.substring(0, 3)}****${mobile.substring(mobile.length - 4)}`
              } else {
                str2 = `${mobile.substring(0, 3)}****`
              }
              this.datalist[i].mobile = str2
            }
            if (birthday !== undefined) {
              const str3 = `${birthday.substring(0, 4)}****`
              this.datalist[i].birthday = str3
            }
          }
          this.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取事项列表失败', desc: res.data.errmsg })
        }
      })
    },
    searchData (index) {
      let params = {
        name: this.applyname,
        code: this.order_code,
        state: this.tab_info[1][index]
      }
      if (this.applytime[0]) params.start_time = date2str(this.applytime[0])
      if (this.applytime[1]) params.end_time = date2str(this.applytime[1])
      this.currentPageNo = 1
      this.init(params)
    },
    change (pageNo) {
      this.currentPageNo = pageNo
      let params = {
        name: this.applyname,
        state: this.tab_info[1][this.tab_index]
      }
      if (this.applytime[0]) params.start_time = date2str(this.applytime[0])
      if (this.applytime[1]) params.end_time = date2str(this.applytime[1])
      this.init(params)
    },
    // 查看订单operation=2，审核operation=3附带按钮
    updateInfo (item, operation, key, action) {
      item.item_id = '' + item.item_id
      if (item.item_id === '11210101000000MZJD5212000330000') {
        this.$router.push({
          name: 'subsistenceapplication',
          params: { cardno: item.cardno, code: item.code, operation: operation, path: 'separateservice' }
        })
      } else if (item.item_id === '11210101000000MZJD5212000322000') {
        this.$router.push({
          name: 'tk_subsistenceapplication',
          params: { cardno: item.cardno, code: item.code, operation: operation, itemid: item.item_id, state: item.state }
        })
      } else if (item.item_id.indexOf('11210101000000FCJD') === 0) {
        this.$router.push({
          name: 'house_handinformation',
          params: {
            itemid: item.item_id,
            cardno: item.cardno,
            code: item.code,
            name: item.name,
            // cur_data: { tabindex: this.tabInfoAll.tabIndex, pageNo: this.currentPageNo },
            operation: operation
          }
        })
      } else {
        this.$router.push({
          name: 'handinformation',
          params: {
            itemid: item.item_id,
            cardno: item.cardno,
            code: item.code,
            oreder_state: item.state,
            cur_data: { tabindex: this.tab_index, pageNo: this.currentPageNo },
            operation: operation,
            buttons: action,
            key: key,
            path: 'separateservice'
          }
        })
      }
    },
    // 电子证照查询结果图片
    getResultImg (item) {
      // if (item.img_url.indexOf('http://images.tripln.top/') === 0) {
      //   this.modelShow.dataInfo.resultImg = { imgs: item.img_url }
      // } else {
      //   this.modelShow.dataInfo.resultImg = { imgs: 'http://images.tripln.top/' + item.userid + '/' + item.code + '0.jpg' }
      // }
      this.modelShow.dataInfo.resultImg = { imgs: item.img_url }
      this.showModel('modal3', '')
    },
    // 处理事项，无附加入参，提报|受理|...
    handlerItem (item, key, action) {
      this.$Modal.confirm({
        title: '确认' + action.name + '当前事项！',
        onOk: () => {
          let aaa = { code: item.code, key: key, state: item.state }
          setorderapply(aaa).then(res => {
            if (res.data.data) {
              this.init({ 'state': this.tab_info[1][this.tab_index] })
              this.initTabCount()
            } else {
              this.$Notice.error({ title: '获取事项列表失败', desc: res.data.errmsg })
            }
          })
        }
      })
    },
    // 查询订单进度
    viewProcess (item) {
      orderProcess({ order_code: item.code }).then(res => {
        if (res.data.data) {
          this.modelShow.dataInfo.process_list = []
          res.data.data.forEach(element => {
            let temp = {}
            temp.step_title = element.process_name + '  ' + element.create_time
            if (element.status === '0') {
              temp.text = '未处理'
              if (element.process_id === '8') {
                temp.text += '（接收社区：' + element.accept_company_name + '）'
              }
            } else {
              if (element.handle_by === 'system') {
                temp.text = '操作人：' + element.handle_byname + ';' + '用时：' + element.used_time
              } else {
                if (element.handle_byname.indexOf('-') !== -1) {
                  temp.text = '操作人：' + element.handle_byname + ';' + '用时：' + element.used_time
                } else {
                  if (element.params && element.params.indexOf('_10_') !== -1) {
                    var process_params = element.params.replace('_10_', ':')
                    temp.text = '操作人：' + element.accept_company_name + '-' + element.handle_byname + ';' + process_params + ';' + '用时：' + element.used_time
                  } else if (element.params && element.params.indexOf('_10_') === -1) {
                    temp.text = '操作人：' + element.accept_company_name + '-' + element.handle_byname + ';' + element.params + ';' + '用时：' + element.used_time
                  } else {
                    temp.text = '操作人：' + element.accept_company_name + '-' + element.handle_byname + ';' + '用时：' + element.used_time
                  }
                }
              }
            }
            this.modelShow.dataInfo.process_list.push(temp)
          })
          this.modelShow.dataInfo.step_num = this.modelShow.dataInfo.process_list.length
          if (res.data.data[res.data.data.length - 1].state === '1') {
            this.modelShow.dataInfo.step_num += 1
          }
          this.showModel('modal1', item.title + '—办理进度')
        } else {
          this.$Notice.error({ title: '失败', desc: '未知原因查询失败，请重试' })
        }
      })
    },
    showModel (indexMol, title) {
      this.modelShow.title = title
      this.modelShow.modal1 = this.modelShow.modal2 = this.modelShow.modal3 = this.modelShow.modal4 = false
      this.modelShow.show = true
      this.modelShow[indexMol] = true
    },
    // 弹出框功能，填写信息后确定按钮
    acceptBtn () {
      let aaa = {
        code: this.modelShow.dataInfo.code,
        key: this.modelShow.dataInfo.key,
        state: this.modelShow.dataInfo.state
      }
      if (this.modelShow.dataInfo.params_code.indexOf('_') === 0) {
        aaa[this.modelShow.dataInfo.params_code.substring(1)] = this.modelShow.dataInfo.text
      } else {
        // let params = {
        //   params_type: this.modelShow.dataInfo.params_type,
        //   params_name: this.modelShow.dataInfo.params_name,
        //   params_code: this.modelShow.dataInfo.params_code,
        //   text: this.modelShow.dataInfo.text
        // }
        // aaa.params = JSON.stringify(params)
      }
      setorderapply(aaa).then(res => {
        if (res.data.data === '1') {
          this.modelShow.modal4 = false
          this.modelShow.show = false
          this.init({ 'state': this.tab_info[1][this.tab_index] })
          this.initTabCount()
        } else {
          this.$Notice.error({ title: '获取事项列表失败', desc: res.data.errmsg })
        }
      })
    }
  },
  mounted () {
    // console.log(this.$route.params, '111')
    this.tab_index = this.$route.params.tabindex || 0
    this.currentPageNo = this.$route.params.pageNo || 1
    this.init({ 'state': this.tab_info[1][this.tab_index] })
    this.initTabCount()
  }
}
</script>
